<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Directive Demo</title>
  </head>
  <script src="/bundle.js"></script>
  <body>
    <div id="area">
      <button id="btn" onclick="sayHello()">打个招呼！</button>
      <br />
      {{ msg.text }}
      <br />
      <br />
      <button id="btn" onclick="addOne()">按我加 1</button>
      <br />
      <br />
      {{b.m.n}}
      <br />
      <br />
      <input type="text" v-model="value" onchange="changeValue()" />
      <br />
      {{value}}
    </div>
  </body>
  <script>
    // console.log(222);
    var vm = new Vue({
      el: "#area",
      data: {
        showFlg: false,
        value: "123",
        msg: {
          text: "simple vue demo",
        },
        a: 10,
        b: {
          m: {
            n: 7,
          },
        },
      },
      watch: {
        a(newVal, oldVal) {
          console.log("a 的值改变了：", newVal, oldVal);
        },
      },
    });
    // console.log(vm);
    function addOne() {
      vm.b.m.n += 1;
    }
    function sayHello() {
      vm.msg.text = "你好啊！";
    }
    function changeValue() {
      console.log(vm.value);
    }
    // 测试watch a 是否生效
    vm.a = 20;
  </script>
  <style>
    body {
      background-color: #f0f0f0;
      display: flex;
      flex-direction: column;
    }
    #btn {
      flex: 0;
      margin: 10px auto;
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
      display: inline-block;
      line-height: 1;
      white-space: nowrap;
      background: #fff;
      border: 1px solid #409eff;
      color: #606266;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      transition: 0.1s;
      font-weight: 500;
      padding: 12px 20px;
      font-size: 14px;
      border-radius: 8px;
    }
    #btn:hover {
      cursor: pointer;
      background: #409eff;
      border-color: #409eff;
      color: #fff;
    }

    #area {
      flex: 0;
      margin: 20px auto;
    }
  </style>
</html>
